<template>
	<view class="user-item">
		<view class="left">
			<slot name="icon"></slot>
			<view class="text">{{text}}</view>
		</view>
		<view class="right">
			<view class="text">{{count}}</view>
			<uni-icons type="right" size="15" color="#aaa"></uni-icons>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<button v-if="showContact" open-type="contact">联系客服</button>
		<!-- #endif -->
		<!-- #ifndef MP -->
		<button v-if="showContact" @click="clickContact">拨打电话</button>
		<!-- #endif -->

	</view>
</template>

<script setup>
	const props = defineProps({
		text: {
			type: String,
			required: true
		},
		count: {
			type: String,
			default: ''
		},
		showContact: {
			type: Boolean,
			default: false
		}
	})
	const clickContact = () => {
		uni.makePhoneCall({
			phoneNumber: '114' //仅为示例
		});
	}
</script>

<style lang="scss" scoped>
	.user-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		height: 100rpx;
		border-bottom: 1rpx solid #eee;
		position: relative;
		background: #fff;

		.left {
			display: flex;
			align-items: center;

			.text {
				padding-left: 20rpx;
				color: #666;
			}
		}

		.right {
			display: flex;
			align-items: center;

			.text {
				font-size: 28rpx;
				color: #aaa;
			}
		}

		button {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			opacity: 0;
		}
	}
</style>